<template>
  <u-popup :closeOnClickOverlay="false" :show="show" :safeAreaInsetBottom="false" mode="center" round="24rpx"
    @close="close" @open="open" @touchmove.native.stop.prevent>
    <view class="my-dialog">
      <image class="dialog-icon" mode="" src="/static/gt2.png"></image>
      <view class="dialog-title">{{ title }}</view>
      <view class="dialog-content">{{ content }}</view>
      <view v-if="showButton" class="dialog-footer">
        <my-button border borderRadius="8" height="80" hoverClass="none" width="244" @click="show = false">
          取消
        </my-button>
        <my-button borderRadius="8" height="80" hoverClass="none" width="244" @click="handleConfirm">
          确定
        </my-button>
      </view>
      <!-- <image
				class="dialog-close"
				mode=""
				src="/static/gt.png"
				@click="show = false"
			></image> -->
    </view>
  </u-popup>
</template>

<script>
import MyButton from "@/chronicDisease/components/my-button/my-button.vue";
export default {
  components: {
    MyButton
  },
  name: "my-dialog",
  props: {
    title: {
      type: String,
      default: "温馨提示",
    },
    content: {
      type: String,
      default: "",
    },
    showButton: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    // 关闭弹框
    close() {
      this.show = false;
    },
    // 打开弹框
    open() {
      this.show = true;
    },
    // 确定按钮
    handleConfirm() {
      this.$emit("confirm");
      this.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.my-dialog {
  position: relative;
  width: 574rpx;
  padding: 48rpx 28rpx;
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .dialog-icon {
    width: 100rpx;
    height: 100rpx;
    margin-bottom: 20rpx;
  }

  .dialog-title {
    font-size: 36rpx;
    font-weight: 600;
    line-height: 50rpx;
    margin-bottom: 12rpx;
  }

  .dialog-content {
    font-size: 32rpx;
    line-height: 44rpx;
    word-break: break-all;
    color: #999;
  }

  .dialog-footer {
    width: 100%;
    margin-top: 50rpx;
    display: flex;
    justify-content: space-between;
  }

  .dialog-close {
    position: absolute;
    top: 28rpx;
    right: 28rpx;
    width: 64rpx;
    height: 64rpx;
  }
}
</style>
